JavaScript'i arendustööriistade integreerimine: VS Code'i laienduste arendus

Visual Studio Code (VS Code) on saanud koodiredaktorite maailmas domineerivaks jõuks, mida armastavad arendajad üle kogu maailma selle paindlikkuse, rikkaliku laienduste ökosüsteemi ja tugeva funktsionaalsuse tõttu. VS Code'i võimsuse võtmeaspekt seisneb selle laiendatavuses, mis võimaldab arendajatel kohandada IDE-d vastavalt oma spetsiifilistele vajadustele ja töövoogudele. See artikkel annab põhjaliku juhendi JavaScript'i arendustööriistade integreerimiseks VS Code'i laienduste arenduse kaudu, hõlmates kõike alates põhitõdedest kuni edasijõudnud tehnikateni.

Miks arendada VS Code'i laiendusi JavaScripti jaoks?

VS Code'i laienduste arendamine JavaScripti jaoks pakub mitmeid eeliseid, mis mõjutavad nii üksikuid arendajaid, meeskondi kui ka laiemat JavaScripti kogukonda.

• Suurem tootlikkus: Automatiseerige korduvaid ülesandeid, optimeerige töövooge ja vähendage käsitsi tehtavat tööd, vabastades arendajad keskenduma põhilisele loogikale ja loomingulisele probleemilahendusele.
• Kohandatud kodeerimiskeskkond: Kohandage IDE vastavalt konkreetsetele projektinõuetele, kodeerimisstiilidele ja isiklikele eelistustele, luues mugavama ja tõhusama arenduskogemuse.
• Parem koodikvaliteet: Integreerige koodikontrollijad (linter'id), vormindajad ja koodianalüüsi tööriistad otse redaktorisse, tagades koodi järjepidevuse, tuvastades potentsiaalsed vead ja edendades parimaid praktikaid.
• Sujuv tööriistade integreerimine: Tooge välised tööriistad ja teenused, nagu ehitussüsteemid, testimisraamistikud ja pilveplatvormid, otse VS Code'i, luues ühtse ja integreeritud arenduskeskkonna.
• Panus kogukonda: Jagage oma laiendusi laiema JavaScripti kogukonnaga, andes teistele arendajatele võimaluse teie tööst kasu saada ning soodustades koostööd ja innovatsiooni.

VS Code'i laienduste arenduse alused

Enne tehnilistesse detailidesse sukeldumist käsitleme VS Code'i laienduste arendamiseks vajalikke olulisi kontseptsioone ja tööriistu.

Eeltingimused

• Node.js ja npm (või yarn): Node.js pakub JavaScripti käituskeskkonda ning npm-i (Node Package Manager) või yarn'i kasutatakse projekti sõltuvuste haldamiseks. Veenduge, et teil on installitud uusimad versioonid. Laadige alla aadressilt nodejs.org.
• VS Code: Loomulikult vajate VS Code'i ennast. Laadige alla aadressilt code.visualstudio.com.
• Yeoman ja VS Code Extension Generator: Yeoman on karkassi loomise tööriist, mis lihtsustab uute projektide loomist. VS Code Extension Generator pakub eelkonfigureeritud malli VS Code'i laienduste jaoks. Installige need globaalselt npm-i abil:

              npm install -g yo generator-code
              
  
                
                  Copy
                
              
            

Laienduse manifest (package.json)

package.json fail on teie laienduse süda. See määratleb laienduse metaandmed, sõltuvused ja aktiveerimissündmused. Peamised omadused on järgmised:

• name: Teie laienduse unikaalne identifikaator.
• displayName: Inimloetav nimi, mida kuvatakse VS Code'i turuplatsil ja laienduste loendis.
• description: Lühike kirjeldus laienduse eesmärgi kohta.
• version: Laienduse versiooninumber.
• publisher: Teie avaldaja ID (vajalik VS Code'i turuplatsil avaldamiseks).
• engines.vscode: Minimaalne VS Code'i versioon, mida laiendus nõuab.
• activationEvents: Sündmuste massiiv, mis käivitavad teie laienduse aktiveerimise. Levinumad sündmused on onCommand:yourCommandId, onLanguage:languageId ja * (aktiveerub käivitamisel). Spetsiifiliste aktiveerimissündmuste kasutamine on jõudluse seisukohalt ülioluline.
• main: Tee peamise JavaScripti failini, mis sisaldab teie laienduse koodi.
• contributes: Objekt, mis määratleb laienduse panuse VS Code'i, näiteks käsud, menüüd, seaded ja vaated.
• dependencies: Nimekiri npm-pakettidest, millest teie laiendus sõltub.
• devDependencies: Nimekiri npm-pakettidest, mis on vajalikud arenduseks, näiteks testimisraamistikud ja ehitustööriistad.

Näide package.json koodilõigust:

            {
  "name": "my-javascript-tools",
  "displayName": "Minu JavaScripti tööriistad",
  "description": "Kasulike JavaScripti arendustööriistade kogumik.",
  "version": "0.0.1",
  "publisher": "my-publisher",
  "engines": {
    "vscode": "^1.70.0"
  },
  "activationEvents": [
    "onCommand:my-javascript-tools.formatCode",
    "onLanguage:javascript"
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "my-javascript-tools.formatCode",
        "title": "Vorminda JavaScripti kood"
      }
    ]
  },
  "dependencies": {
    "prettier": "^2.7.0"
  },
  "devDependencies": {
    "@types/vscode": "^1.70.0",
    "typescript": "^4.7.0"
  }
}
            

              
                Copy
              
            
          

Laienduse API

VS Code'i laienduse API pakub rikkalikku liideste ja funktsioonide komplekti redaktoriga suhtlemiseks, selle funktsioonidele juurdepääsuks ja selle käitumise manipuleerimiseks. Tutvuge peamiste API kontseptsioonidega, sealhulgas:

• vscode.commands: Käsude registreerimine ja täitmine.
• vscode.languages: Keele funktsioonide, nagu koodi lõpetamine, vihjed ja diagnostika, registreerimine.
• vscode.window: Suhtlemine redaktori aknaga, sõnumite kuvamine ja kasutaja sisendi küsimine.
• vscode.workspace: Juurdepääs tööruumiga seotud teabele, nagu failid, kaustad ja seaded.
• vscode.debug: Silumisvõimaluste laiendamine.
• vscode.scm: Integreerimine versioonihaldussüsteemidega.

Aktiveerimissündmused

Aktiveerimissündmused on üliolulised kontrollimaks, millal teie laiendus laaditakse ja aktiveeritakse. Spetsiifiliste aktiveerimissündmuste kasutamine võib märkimisväärselt parandada VS Code'i käivitusjõudlust. Levinumad aktiveerimissündmused on:

• onCommand:<commandId>: Aktiveerub, kui täidetakse kindel käsk.
• onLanguage:<languageId>: Aktiveerub, kui avatakse kindla keelega fail.
• onFileSystem:<scheme>: Aktiveerub, kui avatakse kindla failisüsteemi skeemiga fail (nt file, git, ftp).
• onDebug: Aktiveerub, kui silur käivitatakse.
• onTest: Aktiveerub, kui teste käivitatakse.
• onView:<viewId>: Aktiveerub, kui külgribal on nähtav kindel vaade.
• *: Aktiveerub käivitamisel (kasutage säästlikult, kuna see võib jõudlust mõjutada).

Oma esimese VS Code'i laienduse loomine

Teeme läbi lihtsa VS Code'i laienduse loomise protsessi, mis vormindab JavaScripti koodi kasutades Prettier'i.

Laienduse karkassi loomine

1. Avage terminal ja navigeerige kausta, kuhu soovite oma laienduse luua.
2. Käivitage VS Code Extension Generator:

               yo code
               
   
                 
                   Copy
                 
               
             

3. Vastake küsimustele:
   • Valige New JavaScript Extension.
   • Sisestage laienduse nimi (nt javascript-formatter).
   • Sisestage laienduse identifikaator (nt javascript-formatter).
   • Sisestage kirjeldus (nt Vormindab JavaScripti koodi Prettier'i abil.).
   • Valige, kas lubada TypeScript (selles näites kasutame JavaScripti, kuid TypeScript on suuremate projektide puhul väga soovitatav).
   • Valige, kas lähtestada Giti repositoorium.

Prettier'i installimine

Installige Prettier oma laienduse sõltuvusena:

            cd javascript-formatter
npm install prettier --save
            

              
                Copy
              
            
          

Vormindamisloogika implementeerimine

Avage fail extension.js. See fail sisaldab teie laienduse põhilist loogikat. Asendage olemasolev kood järgmisega:

            const vscode = require('vscode');
const prettier = require('prettier');

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	console.log('Palju õnne, teie laiendus "javascript-formatter" on nüüd aktiivne!');

	let disposable = vscode.commands.registerCommand('javascript-formatter.formatCode', async () => {
		const editor = vscode.window.activeTextEditor;
		if (!editor) {
			vscode.window.showInformationMessage('Aktiivset tekstiredaktorit ei ole.');
			return;
		}

		const document = editor.document;
		const text = document.getText();

		try {
			const formattedText = prettier.format(text, {
				parser: 'babel',
				tabWidth: 2,
				semi: true,
				singleQuote: true,
				trailingComma: 'es5',
				bracketSpacing: true,
				arrowParens: 'always',
				printWidth: 80
			});

			editor.edit(editBuilder => {
				editBuilder.replace(new vscode.Range(
					document.positionAt(0),
					document.positionAt(text.length)
				), formattedText);
			});
		} catch (error) {
			vscode.window.showErrorMessage(`Viga koodi vormindamisel: ${error.message}`);
		}
	});

	context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = {
	activate,
	deactivate
}

            

              
                Copy
              
            
          

package.json faili uuendamine

Muutke package.json faili, et registreerida käsk ja määrata aktiveerimissündmus. Lisage järgmine osa contributes sektsiooni:

            "contributes": {
  "commands": [
    {
      "command": "javascript-formatter.formatCode",
      "title": "Vorminda JavaScripti kood"
    }
  ]
},
            

              
                Copy
              
            
          

Ja uuendage activationEvents sektsiooni:

            "activationEvents": [
  "onCommand:javascript-formatter.formatCode",
  "onLanguage:javascript"
],
            

              
                Copy
              
            
          

Laienduse testimine

1. Vajutage F5, et käivitada laiendus uues VS Code'i aknas (Extension Development Host).
2. Avage JavaScripti fail Extension Development Host'is.
3. Vajutage Ctrl+Shift+P (või Cmd+Shift+P macOS-is), et avada käsupalett.
4. Tippige Format JavaScript Code ja valige käsk.
5. Aktiivses redaktoris olev JavaScripti kood tuleks vormindada Prettier'i abil.

VS Code'i laienduste arenduse edasijõudnute tehnikad

Kui olete põhitõed selgeks saanud, saate uurida keerukamaid tehnikaid, et luua läbimõeldud ja võimsaid VS Code'i laiendusi.

Language Server Protocol (LSP)

Language Server Protocol (LSP) määratleb standardiseeritud viisi, kuidas keeleserverid saavad IDE-dega suhelda. LSP kasutamine võimaldab teil pakkuda täiustatud keelefunktsioone, näiteks:

• Koodi lõpetamine (IntelliSense): Pakkuge asjakohaseid koodilõpetamisi praeguse konteksti põhjal.
• Mine definitsiooni juurde: Navigeerige sümboli definitsiooni juurde.
• Leia kõik viited: Leidke kõik sümboli esinemised tööruumis.
• Nimeta sümbol ümber: Nimetage sümbol ümber ja värskendage kõiki viiteid.
• Koodi diagnostika (lintimine ja veakontroll): Tuvastage potentsiaalsed vead ja pakkuge parandusettepanekuid.

Teegid nagu vscode-languageserver lihtsustavad LSP-põhiste laienduste arendamist.

Silumise tugi

VS Code pakub võimsat silumise API-d, mis võimaldab teil selle silumisvõimalusi laiendada. Saate:

• Luua kohandatud silumisadaptereid: Toetada kohandatud keelte või käituskeskkondade silumist.
• Pakkuda silumiskonfiguratsioone: Pakkuge eelkonfigureeritud silumiskonfiguratsioone konkreetsete projektitüüpide jaoks.
• Lisada kohandatud silumisvaateid: Kuvada silumisteavet kohandatud vaadetes.

Töötamine veebivaadetega (Webviews)

Veebivaated võimaldavad teil manustada veebipõhiseid kasutajaliideseid VS Code'i. See on kasulik keerukate konfiguratsioonipaneelide, interaktiivsete dokumentatsioonivaaturite või visualiseerimiste loomiseks. Saate kasutada HTML-i, CSS-i ja JavaScripti kasutajaliidese ehitamiseks ning suhelda laienduse taustaprogrammiga sõnumite edastamise kaudu.

Seaded ja konfigureerimine

Võimaldage kasutajatel kohandada oma laienduse käitumist seadete kaudu. Määratlege seaded package.json faili contributes.configuration jaotises. Seadetele pääsete juurde vscode.workspace.getConfiguration() API abil.

Oma laienduse testimine

Oma laienduse põhjalik testimine on selle kvaliteedi ja töökindluse tagamiseks ülioluline. Kasutage testimisraamistikke nagu Mocha ja Chai ühiktestide ja integratsioonitestide kirjutamiseks. VS Code pakub sisseehitatud tuge testide käivitamiseks redaktoris.

VS Code'i laienduste arenduse parimad praktikad

Nende parimate tavade järgimine aitab teil luua kvaliteetseid, hooldatavaid ja kasutajasõbralikke VS Code'i laiendusi:

• Kasutage TypeScripti: TypeScript pakub staatilist tüüpimist, mis aitab vigu varakult tabada ja parandab koodi hooldatavust.
• Kasutage asünkroonset programmeerimist: Vältige kasutajaliidese lõime blokeerimist, kasutades asünkroonseid programmeerimistehnikaid, nagu async/await.
• Käsitlege vigu sujuvalt: Rakendage korrektset veakäsitlust, et vältida kokkujooksmisi ja pakkuda kasutajale informatiivseid veateateid.
• Dokumenteerige oma kood: Kirjutage selge ja lühike dokumentatsioon, et aidata teistel arendajatel teie laiendust mõista ja kasutada.
• Järgige VS Code'i laienduste juhiseid: Järgige VS Code'i laienduste juhiseid, et tagada teie laienduse korrektne käitumine ja sujuv integreerumine redaktoriga. Need juhised hõlmavad selliseid teemasid nagu jõudlus, turvalisus ja kasutajakogemus.
• Kasutage semantilist versioonimist: Järgige semantilise versioonimise (SemVer) põhimõtteid oma laienduse uute versioonide väljastamisel.
• Hoidke oma laiendus ajakohasena: Uuendage regulaarselt oma laiendust, et lisada uusi funktsioone, parandada vigu ja tegeleda turvanõrkustega.
• Rahvusvahelistamine (i18n) ja lokaliseerimine (l10n): Arvestage VS Code'i ülemaailmse kasutajaskonnaga ja kujundage oma laiendus i18n/l10n põhimõtteid silmas pidades. See hõlmab stringide välistamist ja tõlgete pakkumist erinevatesse keeltesse.
• Juurdepääsetavus: Veenduge, et teie laiendus oleks juurdepääsetav puuetega kasutajatele. Järgige oma kasutajaliidese kujundamisel juurdepääsetavuse juhiseid ja kaaluge testimiseks abitehnoloogiate kasutamist.

Oma laienduse avaldamine

Kui olete oma laiendusega rahul, saate selle avaldada VS Code Marketplace'is, tehes selle kättesaadavaks miljonitele arendajatele üle maailma.

1. Looge Azure DevOps konto: Oma laienduste haldamiseks vajate Azure DevOps kontot.
2. Installige vsce tööriist: VS Code Extension Manager (vsce) on käsurea tööriist laienduste pakendamiseks ja avaldamiseks.

               npm install -g vsce
               
   
                 
                   Copy
                 
               
             

3. Pakendage oma laiendus:

               vsce package
               
   
                 
                   Copy
                 
               
             

4. Avaldage oma laiendus:

               vsce publish
               
   
                 
                   Copy
                 
               
             

Järgige VS Code Marketplace'i veebisaidil olevaid juhiseid oma laienduse avaldamise kohta üksikasjalikuma teabe saamiseks.

Reaalse maailma näited JavaScripti VS Code'i laiendustest

Siin on mõned näited populaarsetest JavaScripti VS Code'i laiendustest, mis demonstreerivad tööriistade integreerimise võimsust:

• ESLint: Integreerib ESLint linter'i VS Code'i, pakkudes reaalajas koodianalüüsi ja esile tõstes potentsiaalseid vigu.
• Prettier: Vormindab automaatselt JavaScripti koodi vastavalt ühtsele stiilile.
• JavaScript (ES6) code snippets: Pakub kasulike koodilõikude kogumikku JavaScripti arenduseks.
• Debugger for Chrome: Võimaldab siluda Chrome'is töötavat JavaScripti koodi otse VS Code'ist.
• npm Intellisense: Täiendab automaatselt npm-mooduleid import-lausetes.

Need laiendused näitavad, kuidas VS Code'i saab kohandada ja laiendada, et luua tõhusam ja produktiivsem arenduskeskkond.

Kokkuvõte

VS Code'i laienduste arendamine on võimas viis oma JavaScripti arenduse töövoo täiustamiseks, väliste tööriistade integreerimiseks ja laiemasse JavaScripti kogukonda panustamiseks. Omandades laienduse API põhitõed, mõistes edasijõudnute tehnikaid ja järgides parimaid praktikaid, saate luua mõjukaid laiendusi, mis lahendavad reaalseid probleeme ja parandavad arendajate elu üle kogu maailma. Võtke omaks laiendatavuse jõud ja avage VS Code'i täielik potentsiaal!